<template>
  <div class="poem" :style="{'top': top,'left' : left,'right' : right,'bottom' : bottom}">
    <span class="poemText" v-if="poem.content">
      <span @click.stop="poemInfo" v-if="poem != ''">{{poem.content}}</span>———
      <span @click.stop="getAuthorInfo" v-if="poem != ''">{{poem.author}}</span>
    </span>
    <span v-else></span>
    <!--<el-button class="poemBtn" :class="rotate ? 'aa' : 'bb'" @click.stop="getpoem" type="danger" icon="el-icon-refresh" circle style="margin-left: 14px;"></el-button>-->
  </div>
</template>

<script>
export default {
  name: 'Poem',
  props: {
    top: {
      type: [String, Number],
      default: 'auto'
    },
    bottom: {
      type: [String, Number],
      default: 0
    },
    left: {
      type: [String, Number],
      default: 'auto'
    },
    right: {
      type: [String, Number],
      default: 0
    }
  },
  data () {
    return {
      poem: '',
      poemDetails: '',
      rotate: false,
      authorInfo: ''
    }
  },
  mounted () {
    // this.getpoem()
  },
  methods: {
    getpoem () {
      this.rotate = !this.rotate
      this.$get(`https://api.apiopen.top/singlePoetry`, {}, false)
        .then((response) => {
          if (response.code !== 200) {
            this.$message.error('请求失败！' + response.message)
            return
          }
          this.poem = response.result
        }).catch(() => {
          this.poem = ''
        })
    },
    poemInfo () {
      const url = `https://api.apiopen.top/searchPoetry?name=${this.poem.origin}`
      this.$get(url, {}).then(response => {
        // 成功了, 更新数据(成功)
        const poemData = response.result.filter((data) => data.authors === this.poem.author)
        this.poemDetails = poemData[0] || ''
        if (this.poemDetails !== '') this.poemDetails.content = poemData[0].content.replace(/\|/g, '<br>').replace(new RegExp(this.poem.content, 'g'), "<span style='color: #F56C6C;'>$&</span>")
      }).catch(() => {
        // 失败了, 更新数据(失败)
        this.poemDetails = ''
      }).finally(() => {
        if (this.poemDetails === '') {
          this.$notify.info({
            title: '消息',
            message: `没有找到[ ${this.poem.origin} ]的诗歌信息`
          })
        } else {
          this.$alert(this.poemDetails.content, `${this.poemDetails.title}—${this.poemDetails.authors}`, {
            // 是否将 message 属性作为 HTML 片段处理
            dangerouslyUseHTMLString: true,
            // 是否显示确认按钮
            showConfirmButton: false,
            // 自定义类名
            customClass: 'customClass',
            // 居中布局
            center: true,
            // 是否显示右上角关闭按钮
            showClose: false,
            // 是否可通过点击遮罩关闭 MessageBox
            closeOnClickModal: true
          }).then().catch()
        }
      })
    },
    getAuthorInfo () {
      const url = `https://api.apiopen.top/searchAuthors?name=${this.poem.author}`
      this.$get(url, {}).then(response => {
        // 成功了, 更新数据(成功)
        const authorData = response.result
        this.authorInfo = authorData[0] || ''
      }).catch(() => {
        // 失败了, 更新数据(失败)
        this.authorInfo = ''
      }).finally(() => {
        if (this.authorInfo === '') {
          this.$notify.info({
            title: '消息',
            message: `没有找到[ ${this.poem.author} ]的相关信息`
          })
        } else {
          this.$alert(this.authorInfo.desc, `${this.authorInfo.name}`, {
            // 是否将 message 属性作为 HTML 片段处理
            dangerouslyUseHTMLString: true,
            // 是否显示确认按钮
            showConfirmButton: false,
            // 自定义类名
            customClass: 'customClass',
            // 是否显示右上角关闭按钮
            showClose: false,
            // 是否可通过点击遮罩关闭 MessageBox
            closeOnClickModal: true
          }).then().catch()
        }
      })
    }
  }
}
</script>

<style scoped>
  .poem{
    position: fixed;
    padding: 20px;
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
    font-size: 21px;
    color: #F56C6C;
    font-weight: 400;
  }
  .poem:hover{
    cursor: pointer;
  }
  .aa{
    transition: all 2s;
  }
  .bb{
    transform:rotate(360deg);
    transition: all 2s;
  }
</style>
